// 一般纳税人
<template>
  <!-- 一般纳税人 -->
  <div class="GeneralTaxpayers">
    <div class="Submitted" v-if="show">
      <p class="tips">* 您已经提交过该证明材料 如需更改 请联系客服人员...</p>
      <ul>
        <li>
          <span>开户行：</span>
          <i>{{bank_account}}</i>
        </li>
        <li>
          <span>银行账号：</span>
          <i>{{bank_num}}</i>
        </li>
        <li>
          <span>税 号：</span>
          <i>{{tax_num}}</i>
        </li>
        <li>
          <span>证明材料：</span>
          <i>
            <img :src="prove">
          </i>
        </li>
      </ul>
    </div>
    <el-form
      v-else
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="开户行" prop="openingBank">
        <el-input
          type="text"
          v-model="ruleForm.openingBank"
          auto-complete="off"
          placeholder="请输入开户银行"
        ></el-input>
      </el-form-item>
      <el-form-item label="银行账号" prop="bankAccount">
        <el-input
          type="text"
          v-model="ruleForm.bankAccount"
          auto-complete="off"
          placeholder="请输入银行账号"
        ></el-input>
      </el-form-item>
      <el-form-item label="税号" prop="dutyParagraph">
        <el-input
          type="text"
          v-model="ruleForm.dutyParagraph"
          auto-complete="off"
          placeholder="请输入税号"
        ></el-input>
      </el-form-item>

      <el-form-item label="证明材料" prop="Taxpayer">
        <el-upload
          action
          :auto-upload="false"
          list-type="picture-card"
          ref="upload1"
          :limit="1"
          :on-progress="base64"
          :on-exceed="onExceed"
          accept="image/jpeg, image/jpg, image/png"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <p class="tips" style="color: #f40; font-size:12px; text-align: left;">*上传图片不得超过2M</p>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt>
        </el-dialog>
        <p style="font-size：12px;color:#9d9d9d">一般纳税人认证请上传相关证明（支持：jpg,jpeg,png格式图片）</p>
      </el-form-item>

      <el-form-item>
        <el-button
          v-if="this.$store.state.userStatus"
          class="register"
          type="primary"
          style="width:300px"
          :disabled="disabled"
          @click="submitForm('ruleForm')"
        >提 交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "myCenter",
  data() {
    return {
      bank_account: null,
      bank_num: null,
      tax_num: null,
      prove: null,


      show: false, // tips的显示与隐藏
      // 纳税人证明
      disabled: false, // 按钮点击的提交事件
      dialogImageUrl: "", // 纳税人证明暂存路径
      dialogVisible: false, // 纳税人证明
      ruleForm: {
        openingBank: '', // 开户行
        bankAccount: '', //银行账号
        dutyParagraph: '', //税号
        Taxpayer: "" // 纳税人证明
      },
      rules: {
        openingBank: [
          {
            required: true,
            message: "请输入开户银行",
            trigger: "blur"
          }
        ],
        bankAccount: [
          {
            required: true,
            message: "请输入银行账号",
            trigger: "blur"
          }
        ],
        dutyParagraph: [
          {
            required: true,
            message: "请输入税号",
            trigger: "blur"
          }
        ],

        Taxpayer: [
          {
            required: true,
            message: "请上传纳税人证明",
            trigger: "blur"
          }
        ]
      },
      formLabelWidth: "120px"
    }
  },

  methods: {
    // 是否提交过证明材料 接口
    async getInvoice() {
      let user_id = this.$store.state.UserInfor.user_id
      let res = await this.$http({
        method: 'post',
        url: 'index/web/doSelfInfos',
        data: {
          user_id,
          status: 'company'
        }
      })
      console.log(res)
      if (res.data.State.Code == 200) {
        console.log(res.data.prove)
        const { bank_account, bank_num, tax_num, prove } = res.data.data

        this.bank_account = bank_account
        this.bank_num = bank_num
        this.tax_num = tax_num
        this.prove = prove
        console.log(bank_account, bank_num, tax_num, prove)
        if (res.data.prove) {
          this.show = false
        } else {
          this.show = true
        }
      }
    },

    // 图片超过限定数量的钩子函数
    onExceed(files, fileList) {
      this.$message({
        message: "温馨提示:上传图片最多为一张 请勿重复点击...",
        type: "warning"
      })
    },

    // 图片格式转换方法

    base64() {
      let url = document.getElementsByClassName('el-upload-list__item-thumbnail')[0].src
      this.ruleForm.Taxpayer = this.imgbase64(url)
    },


    // 删除上传的图片
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },

    // 图片预览营业执照
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    // 提交纳税人证明
    async submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.base64()
          let user_id = this.$store.state.UserInfor.user_id,
            prove = this.ruleForm.Taxpayer,
            bank_account = this.ruleForm.openingBank,  // 开户行
            bank_num = this.ruleForm.bankAccount, // 银行账户
            tax_num = this.ruleForm.dutyParagraph // 税号

          this.$http({
            method: 'post',
            url: 'index/web/invoice',
            data: {
              user_id,
              prove,
              bank_account,
              bank_num,
              tax_num
            }
          }).then(res => {
            if (res.data.State.Code == 200) {
              this.$notify({
                title: '成功',
                message: '材料已提交...',
                type: 'success'
              })
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  mounted() {
    this.getInvoice()
  }

}
</script>


<style lang="scss" scoped>
// 一般纳税人
.GeneralTaxpayers {
  .Submitted {
    width: 400px;
    margin: auto;

    ul {
      li {
        line-height: 40px;
        display: flex;
        flex-direction: row;
        span {
          color: #333;
          width: 70px;
          text-align: right;
        }
        i {
          color: #999;
          img{
            width: 300px;
            margin-top: 13px;
          }
        }
      }
    }
  }
  .tips {
    text-align: center;
    color: #f40;
    line-height: 30px;
    margin-bottom: 10px;
    font-size: 12px;
  }
  /deep/ .el-form {
    padding-bottom: 60px;
    width: 500px;
    margin: auto;
    .el-form-item {
      .code {
        display: flex;
        flex-direction: row;
        .el-input {
          width: 60%;
        }
        .el-button {
          margin-left: 5px;
        }
        .register {
          width: 300px;
        }
      }
      /deep/ .el-checkbox {
        margin-left: 0px;
        margin-right: 20px;
      }
    }
    .jumplogin {
      text-align: right;
      padding-right: 138px;
      span {
        color: #ff7200;
        cursor: pointer;
      }
    }
  }
}
</style>
